<template>
  <el-button
    :size="size"
    :type="type"
    :icon="icon"
    :disabled="disabled"
    :loading="loading"
    :class="{ primaryClass : isPrimaryClassActive }"
    :plain="plain"
    @click="handleClick"
  >
    <!-- 插槽，外部数据插入-->
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'MyBtn',
  props: {
    isPrimaryClassActive:{
      type: Boolean,
      default: true
    },
    plain:{
      type: Boolean,
      default: false
    },

    icon: {
      // 按钮图标
      type: String,
      default: null
    },
    label: {
      // 按钮显示文本
      type: String,
      default: 'Button'
    },
    size: {
      // 按钮尺寸
      type: String,
      default: "medium"
    },
    type: {
      // 按钮类型
      type: String,
      default: null
    },
    loading: {
      // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: {
      // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {
      // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick: function(evt) {
      this.$emit('click', evt)
    }
  }
}
</script>
<style scoped lang="scss">
$my-default-btn-color: #0A4EAB;
$my-default-btn-color-hover: #4174f5;
// .el-button.el-button--primary {
//   color: #fff;
//   background-color: $my-default-btn-color;
//   border-color: $my-default-btn-color;
// }

.primaryClass{
  //height: 32px;
  padding: 7px 23px;
  color: #fff;
  background-color: $my-default-btn-color;
  border-color: $my-default-btn-color;
  //background-color: $my-default-btn-color !important;
  //border-color: $my-default-btn-color !important;
}
.el-button.el-button--primary:hover {
  color: #fff;
  background-color: $my-default-btn-color-hover;
  border-color: $my-default-btn-color-hover;
}

.primaryClass:disabled, .primaryClass:disabled:hover{
  color: #C9CACB;
  background-color: #F7F8FA;
  border-color: #DCDEE0;
}
</style>
